<script setup lang="ts">
const props = defineProps({
  visible: {
    type: Boolean,
    default: false,
  },
  winner: {
    type: String,
    default: '',
  },
})
const emits = defineEmits(['update:visible'])

const dialogVisible = ref(false)

watch(() => props.visible, (newVal) => {
  dialogVisible.value = newVal
})

function handleClose() {
  emits('update:visible', false)
}
</script>

<template>
  <el-dialog v-model="dialogVisible" title="🎉 恭喜中奖 🎉" width="30%" @close="handleClose">
    <p style="text-align: center; font-size: 26px;">
      🎁 {{ winner }}
    </p>
    <template #footer>
      <el-button type="primary" @click="handleClose">
        确认
      </el-button>
    </template>
  </el-dialog>
</template>
